<template>
  <view class="stuLogin">
    <view class="logo">
      <view class="logoTitle">
        <span>NPISystem</span>
        <span>{{ rec_id == 0 ? "学生登录" : "带教单位登录" }}</span>
      </view>
    </view>
    <view class="myform">
          <AtForm>
            <view class="inputItem">
              <AtIcon value='user' size='30' color='#5E8BFF'></AtIcon>
              <AtInput
                name="username"
                type="text"
                placeholder="请输入学号"
                :value="student.username"
                :onChange="handleChange.bind(this,'username')"
                v-if="!rec_id"
              />
              <AtInput
                v-else
                disabled
                name="username"
                type="text"
                :value="unitMsg.title"
              />
            </view>
            <view class="inputItem">
              <AtIcon value='lock' size='30' color='#5E8BFF'></AtIcon>
              <AtInput
                name="value"
                type="password"
                :value="student.password"
                placeholder="请输入密码"
                :onChange="handleChange.bind(this,'password')"
              />
            </view>
            <AtButton formType="submit" type='primary' class="submit" :onClick="onSubmit">登录</AtButton>
          </AtForm>
    </view>
    <view class="version">
      <span>NPISystem V{{ version }}</span>
    </view>
  </view>
</template>

<script>
import Taro from '@tarojs/taro'

export default {
  data() {
    return {
      student: {
        username: '',
        password: '',
      },
      dept: {
        username: '',
        password: '',
      },
      rec_id: 0,
      unitMsg: {
        title: "正在加载...",
        username: ""
      },
      show: false,
      version: "1.0.0"
    }
  },
  mounted() {
    this.getVersion()
    /**
     * @type {url参数}
     */
    let query = this.$taro.Current.router.params;
    if (query.rec_id) {
      this.rec_id = query.rec_id;
    }
    if (this.rec_id) {
      this.getUnit(this.rec_id)
    }
  },
  methods: {
    handleChange(stateName, value) {
      this.student[stateName] = value;
    },
    onSubmit() {
      if (!this.rec_id){
        this.stuLogin("student")

      }else {
        this.deptLogin("unit")
      }
    },
    async getVersion(){
      let res =  await this.$myRequest({
        url: 'App.Site.Index',
      })
      this.version = res.data.data.version;
    },
    async getUserProfile(url) {
      let res =  await this.$myRequest({
        url: url,
      })
      this.$store.state.studentInfo = res.data.data.profile;
      if (!this.rec_id){
        res.data.data.profile.role = "student";
      }else {
        res.data.data.profile.role = "dept";
      }
      // console.log(res.data.data.profile)
      Taro.setStorageSync("userInfo",res.data.data.profile)
    },
    async deptLogin(mytype) {
      let res =  await this.$myRequest({
        url: "?s=App.Auth.UserLogin",
        data: {
          username: this.dept.username,
          password: this.student.password,
          type: mytype,
          rec_id: this.rec_id
        }
      })
      // console.log(res)
      if (res.data.ret === 200) {
        Taro.setStorageSync('token', res.data.data.access_token);
        await this.getUserProfile("?s=App.User_Unit.UserProfile")
        await Taro.navigateTo({
          url: `/pages/DocList/DocList?rec_id=${this.rec_id}`
        })
      }
    },
    async stuLogin(mytype) {
      let res = await this.$myRequest({
        url: "?s=App.Auth.UserLogin",
        data: {
          username: this.student.username,
          password: this.student.password,
          type: mytype,
          rec_id: this.rec_id
        }
      })
        if (res.data.ret === 200) {
          Taro.setStorageSync('token', res.data.data.access_token);
          await this.getUserProfile("?s=App.User_Student.UserProfile")
          await Taro.navigateTo({
            url: '/pages/index/index'
          })
        }
    },
    async getUnit(rec_id) {
      let res = await this.$myRequest({
        url: "?s=App.Auth.GetUnit",
        data: {
          rec_id: rec_id,
        }
      })
      // console.log(res)
      this.dept.username = res.data.data.username
    }
  },
}
</script>
<style lang="less" scoped>
.at-form::after{
  border: none;
}
.logo{
  background-image: url('../../assets/images/pic-topright.png'), url('../../assets/images/pic-people.png');
  background-repeat: no-repeat;
  background-position: top right,3.5rem 4.5rem;
  background-size: 10rem 6.5rem,8rem 7.5rem;
  width: 100vw;
  height: 100vh;
  position: relative;
  display: flex;
  justify-content: center;
  .logoTitle{
    position: absolute;
    top: 12.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    span{
      margin-top: 0.5rem;
      width: 6.5rem;
      text-align: center;
    }
  }
}

.myform{
  width: 100%;
  position: absolute;
  top: 16.5rem;

  .inputItem {
    padding-left: 1rem;
    display: flex;
    margin-left:  1.25rem;
    margin-right:  1.25rem;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 10.25rem;
    margin-top: 1.25rem;
    justify-content: center;
  }

  .submit {
    border-radius: 10.25rem;
    margin-top: 1.25rem;
    margin-left:  1.25rem;
    margin-right:  1.25rem;
  }
  .at-input {
    padding: 0.4rem 0;
    background-color: transparent;
  }
  .at-input::after{
    border: none;
  }
}

.version{
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  color:#9d9d9d;
  text-align: center;
}
</style>
